<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <link rel="stylesheet" href="../fontawesome-5.15.4/css/all.css">
  <script src="../fontawesome-5.15.4/js/all.js" ></script>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  body{
    font-size: 12px;
    color: #999;
  }
  ul{
    list-style-type: none;
  }
  /*处理高度塌陷问题*/
  .clearfix::before,
  .clearfix::after{
    content: '';
    display: table;
    clear: both;
  }
  .top-bar-wrapper{
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #ccc;

  }
  .top-bar{
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  .location{
    float: left;
  }
  /*城市列表*/
  .location .city-list{
    width: 350px;
    height: 350px;
    background-color: #fff;
    border: 1px solid rgb(204,204,204);
    border-top: none;
    display: none;
    position: absolute;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
    top: 30px;
    z-index: 999;
  }
  /*鼠标放位置上后显示城市列表*/
  .location:hover .city-list{
    display: block;
  }
  .current-city{
    padding: 0 10px;
    border: 1px solid transparent;
    border-bottom: none;
    position: relative;
    z-index: 9999;
  }
  /*设置位置背景*/
  .location:hover .current-city{
    background-color: #fff;
    /*border: 1px solid rgb(204,204,204);*/
    border-left: 1px solid rgb(204,204,204);
    border-top: 1px solid rgb(204,204,204);
    border-bottom: none;
  }
  .current-city .fa-map-marker-alt{
    font-size: 14px;
    color: #ff253a;
  }

  .shortcut{
    float: right;
  }
  .shortcut .line{
    width: 1px;
    height: 10px;
    background: #999;
    margin: 12px 12px 0;
  }
  .shortcut li{
    float: left;
  }
  .top-bar a,
  .top-bar span,
  .top-bar i{
    color: #999;
    text-decoration: none;
  }
  .top-bar a:hover,
  .shortcut .highlight{
    color: #ff253a;
  }
</style>
<body>
<div class="top-bar-wrapper clearfix">
  <div class="top-bar">
    <!--左侧菜单-->
    <div class="location">
      <div class="current-city">
        <i class="fas fa-map-marker-alt" ></i>
        <a href="javascript:;">北京</a>
      </div>

      <!--城市列表-->
      <div class="city-list">

      </div>
    </div>
    <!--右侧菜单-->
    <ul class="shortcut clearfix">
      <li>
        <a href="javascript:;">请登录</a>
        <a class="highlight" href="javascript:;">免费注册</a>
      </li>
      <li class="line"></li>
      <li>
        <a href="javascript:;">我的订单</a>
      </li>
      <li class="line"></li>
      <li>
        <a href="javascript:;">我的京东</a>
        <i class="fas fa-angle-down"></i>
      </li>
      <li class="line"></li>
      <li>
        <a href="javascript:;">京东会员</a>
      </li>
      <li class="line"></li>
      <li>
        <a href="javascript:;">企业采购</a>
        <i class="fas fa-angle-down"></i>
      </li>
      <li class="line"></li>
      <li>
        <span>客户服务</span>
        <i class="fas fa-angle-down"></i>
      </li>
      <li class="line"></li>
      <li>
        <span>网站导航</span>
        <i class="fas fa-angle-down"></i>
      </li>
      <li class="line"></li>
      <li>
        <span>手机京东</span>
      </li>
    </ul>
  </div>
</div>
</body>
</html>
